<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		.container {
			width: 850px;
			margin: 100px auto 0;
			padding: 20px;
			background: #eee;
		}

		.clearfix:after {
			content: '';
			display: block;
			clear: both;
		}

		.cell {
			text-align: center;
			height: 40px;
			width: 90px;
			color: white;
			background: blue;
			border: 1px solid #FFFFFF;
			line-height: 40px;
			font-size: 20px;
			font-weight: 700;
			cursor: pointer;
			float: left;
			transition: all 0.5s;
		}

		/* .cell:hover{
				
				
			} */
		.active {
			transform: scale(1.2);
			background-color: rgb(167, 241, 157);
		}
	</style>
</head>

<body>
	<div class="container">

	</div>
	<script type="text/javascript">
		var container = document.getElementsByClassName('container')[0];
		console.log(container);
		for (var i = 1; i <= 9; i++) {
			var row = document.createElement('div');
			row.className = 'row clearfix';
			for (var j = 1; j <= i; j++) {
				var cell = document.createElement('div');
				cell.className = 'cell';
				cell.innerHTML = `<span data-value=${i*j}>${i}×${j}=${i*j}</span>`;
				row.append(cell)
			};
			container.append(row);
		}
		const allCells = document.querySelectorAll('.cell')
		// allCells.forEach(function(cell){
		// 	cell.addEventListener('click',function(){
		// 		cell.classList.toggle('active')
		// 	})
		// })
		// for (let i = 0; i < allCells.length; i++) {
		// 	let cell = allCells[i]
		// 	cell.addEventListener('click', function () {
		// 		cell.classList.toggle('active')
		// 	})
		// }
		container.addEventListener('click',function(e){
			//获取点击的元素
			let  target = e.target
			if(target.tagName === "SPAN"){
				let cellEle = target.parentElement
				cellEle.classList.toggle('active')
			}else if( target.tagName === "DIV" && target.className === 'cell' ){
				target.classList.toggle('active')
			}		
		})
	</script>
</body>

</html>